<template>
  <van-overlay :show="advertisingShow" :duration="advertisingShow ? 0 : 0.7" z-index="100">
    <div class="advertising-wrap" :class="advertisingShow ? 'in' : ''">
      <div class="advertising-cont">
        <div @click="jumpPage(advertising.action,true)">
          <img :src="advertising.pic ? $imgUrlHead + advertising.pic : ''" class="suspension" />
        </div>
        <div @click="closeAdv" class="needsclick">
          <img src="@/assets/images/adv-close.png" class="close-img" />
        </div>
      </div>
    </div>
  </van-overlay>
</template>

<script>
import { popAdvertising , recordAdvertisingPop} from "api/index";
import jumpMixin from "mixin/jumpMixin.js"
export default {
  data() {
    return {
      advertisingShow: false,
      advertisingId: '',
      advertising: {}   //广告参数
    };
  },
   mixins: [jumpMixin],

  mounted() {

    popAdvertising().then(res => {

        if (res.result) {
            if (res.status == 1) {                                
                let {pic , action , frequency , frequencyDays , startTime , endTime , id} = res.result

                this.advertising.pic = pic
                this.advertising.action = res.result
                this.advertisingId = id

                // 出现频次  1：首次访问页面时出现 2：首次访问页面时出现，之后每 N天出现1次
                if (frequency == 0) {

                    if (localStorage.getItem('FIRST_FLAG')) {
                        this.advertisingShow = false
                    } else {
                        this.advertisingShow = true
                        localStorage.setItem('FIRST_FLAG',1)
                        this.getRecordAdvertisingPop(id)
                    }
                    localStorage.removeItem('ADTIME')
                } else {
                    
                    localStorage.removeItem('FIRST_FLAG')
                    let timeObj = localStorage.getItem('ADTIME')

                    if (timeObj) {

                        if (timeObj.interfaceTime < startTime) {
                            localStorage.removeItem('ADTIME')
                        }

                        let oldTime = timeObj.localTime  //本地缓存的时间
                        let newTime =  new Date().getTime()  //获取最新本地时间，作为下次间隔时间
                        
                        // debugger
                        const diff = (newTime - oldTime) / (1000 * 60 * 60 * 24)
                        if (diff > frequencyDays) {
                            this.advertisingShow = true
                            //并且重新赋值
                            let adTime = {
                                localTime: newTime,  //本地时间
                                interfaceTime: endTime   //接口返回的广告开始时间
                            }
                            localStorage.setItem('ADTIME',adTime)
                            this.getRecordAdvertisingPop(id)
                        }
                        
                    } else {
                        //获取当前时间
                        let adTime = {
                            localTime: new Date().getTime(),  //本地时间
                            interfaceTime: endTime   //接口返回的广告开始时间
                        }
                        localStorage.setItem('ADTIME',JSON.stringify(adTime))
                        this.advertisingShow = true
                        this.getRecordAdvertisingPop(id)
                    }
                }

            } else {
              this.advertisingShow = false
            }
        } else {
            localStorage.removeItem('ADTIME')
            localStorage.removeItem('FIRST_FLAG')
            this.advertisingShow = false
        }
    }).catch(e => {
        this.advertisingShow = false
    })

  },
  methods: {
    //关闭广告
    closeAdv() {
      this.advertisingShow = false;
    },

    //记录弹窗广告弹出次数
    getRecordAdvertisingPop(advertisingId) {
        recordAdvertisingPop({advertisingId}).then(res => {
        }).catch(e => {
            this.$toast(e.msg)
        })
    },

  },
  components: {}
};
</script>
<style lang="stylus" scoped>
.advertising-wrap {
  position: relative;
  width: 100%;
  height: 100%;

  &.in {
    animation: slideIn 0.5s linear;

    @keyframes slideIn {
      0% {
        transform: scale(0.2);
        opacity: 0;
      }

      100% {
        transform: scale(1);
        opacity: 1;
      }
    }
  }

  &.out {
    animation: slideOut 1s linear;

    @keyframes slideOut {
      from {
        transform: scale(1);
        opacity: 1;
      }

      to {
        transform: scale(0);
        opacity: 0.2;
      }
    }
  }

  .advertising-cont {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    .close-img {
      text-align: center;
      display: block;
      width: 30px;
      height: 30px;
      margin: auto;
      margin-top: 20px;
    }

    .suspension {
      width: 250px;
      height: 333.5px;
    }
  }
}
</style>
